<template>
	<div class="about">
		<div class="header">
			<div class="header-logo"><img src="../assets/images/home/20210324100136.png" /></div>
			<div class="search" @click="remove" v-if="removeTs">管理</div>
			<div class="search" @click="remove" v-else>删除</div>
		</div>

		<div class="vans">

			<div v-if="isShow">
				<van-swipe-cell v-for="(item,index) in lisArrs" :key="index">
					<div class="fuxuan">
						<van-checkbox-group v-model="result">
							<van-checkbox :name="item" checked-color="#343434" @click="cheItme(item.id,index)"></van-checkbox>
						</van-checkbox-group>
					</div>
					<van-card :price="item.price" :desc="'规格：'+item.title" class="goods-card" :thumb="item.image" num="5">
						<div slot='title' class="title">{{item.product_title}}</div>
						<div slot='num' class="title" @click="updateGo(item.id,item.amount)">
							<van-stepper v-model="item.amount" theme="round" button-size="18" disable-input />
						</div>
					</van-card>
				</van-swipe-cell>
			</div>
			<div class="kong" v-else>
				<h1>购物车为空</h1>
			</div>
			<!-- {{result}} -->
			<!-- 总价：：{{}} -->
		</div>

		<div v-show="tabShow">
			<div v-if="xauz">
				<van-submit-bar button-text="提交订单" @submit="onSubmit" button-color="#343434">
					<van-checkbox @click="checkAll" v-model="checkBtn" checked-color="#343434">全选</van-checkbox>
					<div slots='price' class="price">
						合计：<span>￥{{tofun}}</span>
					</div>
				</van-submit-bar>

			</div>
			<div v-else>
				<van-submit-bar button-text="删除" @submit="onRemove" button-color="#343434">
					<van-checkbox @click="checkAll" v-model="checkBtn" checked-color="#343434">全选</van-checkbox>
					<div slots='price' class="price"></div>
				</van-submit-bar>
			</div>
		</div>
		<!-- 底部导航 -->
		<tab-bar>
			<tab-bar-item path="/home">
				<img src="../assets/images/tabbar/home.png" slot="item-icon" />
				<img src="../assets/images/tabbar/home_selected.png" slot="item-select-icon" />
				<div slot="item-text">首页</div>
			</tab-bar-item>
			<tab-bar-item path="/about">
				<img src="../assets/images/tabbar/index.png" slot="item-icon" />
				<img src="../assets/images/tabbar/index_selected.png" slot="item-select-icon" />
				<div slot="item-text">购物车</div>
			</tab-bar-item>

			<tab-bar-item path="/order">
				<img src="../assets/images/tabbar/order.png" slot="item-icon" />
				<img src="../assets/images/tabbar/order_selected.png" slot="item-select-icon" />
				<div slot="item-text">订单</div>
			</tab-bar-item>

			<tab-bar-item path="/my">
				<img src="../assets/images/tabbar/my.png" slot="item-icon" />
				<img src="../assets/images/tabbar/my_selected.png" slot="item-select-icon" />
				<div slot="item-text">我的</div>
			</tab-bar-item>
		</tab-bar>
		<!-- {{result}} -->

	</div>
</template>
<script>
	import {
		SwipeCell
	} from 'vant';
	import {
		Button
	} from 'vant';
	import {
		Card
	} from 'vant';
	import {
		Stepper
	} from 'vant';
	import {
		SubmitBar
	} from 'vant';
	import {
		Checkbox,
		CheckboxGroup,
		Toast
	} from 'vant';
	// 引入tabbar组件
	import TabBar from '../components/tabbar/TabBar.vue'
	import TabBarItem from '../components/tabbar/TabBarItem.vue'
	export default {

		data() {
			return {
				value: 1,
				result: [],
				lisArrs: [],
				removeTs: true,
				xauz: true,
				checkBtn: false,
				isShow: true,
				cheid: '',
				cheidIndex: '',
				tabShow: true

			}
		},
		created() {
			console.log(this.$store.state.nameId.userid)
			this.getgwc()

		},
		updated() {
			// 数据更新后判断如果购物车没有数据则显示购物车为空
			if (this.lisArrs == '') {
				this.stime()
			}
		},
		methods: {
			// 购物车更新请求
			async updateGo(id,amount) {
				console.log(id)
				// 请求购物车的数据
				await this.$get(this.$API.CART_LIST, {
					userId: this.$store.state.nameId.userid
				}).then(res => {
					for (let i = 0; i < res.data.length; i++) {
						// console.log(res.data[i])
						if(res.data[i].id==id){
							// 请求购物车更新接口
							this.$get(this.$API.CART_UPDATEITEM, {
								userId:this.$store.state.nameId.userid,
								orderItemId:res.data[i].id,
								quantity:amount
							}).then(res => {
								// console.log(res)
							})
						}

					}



				}).catch(err => {
					console.log(err)
				})

			},

			// 前往订单确认页
			onSubmit() {
				if (this.result == '') {
					Toast({
						message: '你还没有选择商品',
						duration: 700
					})
				} else {
					let objAd = JSON.stringify(this.result[0])
					this.$router.push({
						name: 'queren',
						params: {
							conter: encodeURIComponent(objAd)
						}
					})
				}

			},
			// 购物车为空时
			stime() {
				if (this.lisArrs.length <= 0) {
					this.isShow = false
					this.checkBtn = false
					this.tabShow = false
					// console.log('购物车为ko')
				} else {
					// console.log('购物车不为为空')
				}
			},
			// 全选按钮
			checkAll() {
				if (this.checkBtn) {

					for (let i = 0; i < this.lisArrs.length; i++) {
						this.result.push(this.lisArrs[i])
					}
				} else {
					this.result = []
				}
			},
			// 请求购物车数据
			async getgwc() {
				await this.$get(this.$API.CART_LIST, {
					userId: this.$store.state.nameId.userid
				}).then(res => {
					console.log(res.data)
					// res.data.findIndex(item=>itme.id==1{
					// 	console.log(item)
					// 	// console.log(obj)
					// }
					for (let i = 0; i < res.data.length; i++) {
						console.log(res.data[i])
						this.lisArrs.push(res.data[i])
					}
					 this.stime()

				}).catch(err => {
					console.log(err)
				})
			},
			// 把当前选择的购物车的id给this.cheid
			cheItme(cheid, index) {
				this.cheid = cheid
				this.cheidIndex = index
			},
			// 删除购物车
			remove() {
				this.removeTs = !this.removeTs
				// 判断管理删除
				if (this.removeTs == false) {
					this.xauz = false
				} else {
					this.xauz = true
				}
			},
			// 删除按钮
			onRemove() {
				if (this.result == '') {
					Toast({
						message: '你还没有选择商品',
						duration: 700
					})
					}else{
						
				  for (let i = 0; i < this.result.length; i++) {
					console.log(this.result[i].id)
					//判断result里面的id跟你点击的id是否一致，一致则执行删除
					if (this.result[i].id == this.cheid) {
						this.$get(this.$API.CART_REMOVEITEM, {
							userId: this.$store.state.nameId.userid,
							orderItemid: this.cheid
						}).then(res => {
							// console.log(res)
							this.lisArrs.splice(this.cheidIndex, 1)
						}).catch(err => {
							console.log(err)
						})

					} else if (this.checkBtn == true) { //判断全部删除
						this.$get(this.$API.CART_REMOVEALL, {
							userId: this.$store.state.nameId.userid
						}).then(res => {
							// console.log(res)
							this.lisArrs.splice(this.cheidIndex)
						}).catch(err => {
							console.log(err)
						})
					} else {
						Toast('你还没有选择商品');
						console.log('你还没有选择商品')
					}
				}
                }
			}
		},
		computed: {
			// 计算购物车的价格
			tofun() {
				let getFn = 0;
				for (let i = 0; i < this.result.length; i++) {
					// 价格 * 数量
					getFn += this.result[i].price * this.result[i].amount
				}
				return getFn //结果：164 
			}
		},
		components: {
			[SwipeCell.name]: SwipeCell,
			[Button.name]: Button,
			[Card.name]: Card,
			[Stepper.name]: Stepper,
			[Checkbox.name]: Checkbox,
			[SubmitBar.name]: SubmitBar,
			[CheckboxGroup.name]: CheckboxGroup,
			[Toast.name]: Toast,
			TabBar,
			TabBarItem

		}
	}
</script>
<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;

	.home {
		width: @width;
		height: 100vh;
		background-color: #E6E6E6;

	}

	.header {
		width: @width;
		height: 13vw;
		display: @display;
		background-color: #ffffff;
		box-shadow: -1px 0px 0.6px #999999;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.header-logo {
		flex: 5;
		height: 15vw;
		display: @display;
		align-items: center;
	}

	.header-logo>img {
		width: 100px;
		height: 10vw;
		margin-left: 20px;
	}

	.search {
		flex: 1;
		display: @display;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
	}

	.vans {
		margin-top: 70px;
		padding-bottom: 100px;

		.kong {
			text-align: center;
		}
	}

	.goods-card {
		margin: 0;
		background-color: #ffffff;
		border-bottom: 1px solid #F6F6F6;
		margin-top: 10px;

		.title {
			font-size: 16px;
		}

		/deep/.van-stepper--round .van-stepper__minus {
			color: #343434;
			background-color: #fff;
			border: 1px solid #343434;
		}

		/deep/.van-stepper--round .van-stepper__plus {
			color: #fff;
			background-color: #343434;
		}
	}

	.fuxuan {
		position: absolute;
		top: 12px;
		left: 19px;
		z-index: 9999999999;
	}

	.van-submit-bar {
		bottom: 15vw !important;
		// background-color:;
		width: 90vw;
		border-radius: 50px;
		left: 50%;
		margin-left: -45vw;
		box-shadow: 0px 0px 1px #cccccc;

		.price {
			width: 120px;
			text-align: center;

			>span {
				color: red;
			}

		}

		.ks {
			width: 120px;
			border: 1px solid red;
		}
	}
</style>
